<template>
	<view class="h-full" style="color: #9FA6B5;">
		<u-navbar :title="$t('zichan.zhuanyi')" :bgColor="config.bg" :titleStyle="{color:config.color}"
			:leftIconColor="config.color" placeholder autoBack>
			<template #right>
				<navigator url="/pages/template/zhuanyijilu/zhuanyijilu">
					<view class="iconfont icon-Tab_lishijilu text-xl"></view>
				</navigator>
			</template>
		</u-navbar>
		<view class="p-4 text-white">
			<u-steps current="0" direction="column">
				<u-steps-item>
					<template #title>
						<view class="text-xl ml-2" style="color: #3c9cff;position: relative;top: -4px;">{{$t('zhuanyi.xuanzebizhong')}}</view>
					</template>
					<template #desc>
						<view class="p-2">
							<view class="p-2 flex justify-between items-center border" style="border-color: #3d3d4b;">
								<view class="text-white text-xl">USDC</view>
								<view class="flex items-center text-xs" style="color: #3c9cff;" @click="$refs.lzselect.show()">
									{{$t('chongbi.qiehuanbizhong')}}
									<u-icon name="arrow-right" color="#3c9cff" size="12"></u-icon>
								</view>
							</view>
						</view>
					</template>
				</u-steps-item>
				<u-steps-item>
					<template #title>
						<view class="text-xl ml-2" style="color: #3c9cff;position: relative;top: -4px;">{{$t('zhuanyi.zhuanyidizhi')}}</view>
					</template>
					<template #desc>
						<view class="p-2">
							<view class="border p-2 rounded-md " style="border-color: #3d3d4b;color: grey;">
								<u--input :placeholder="$t('zhuanyi.qingshurudizhi')" border="none" color="#909399"
								    v-model="search.addr" @change="changeInput"
								></u--input>
							</view>
							<view class="py-4">
								<uni-data-select v-model="search.select" :localdata="search.range" @change="changeselect" :clear="false" style="height: 42px;"></uni-data-select>
							</view>
						</view>
					</template>
				</u-steps-item>
			</u-steps>
			<view class="pl-8 pr-2">
				<view class="mt-4">
					<u-gap height="8" bgColor="#242424"></u-gap>
				</view>
				
				<view class="py-2" style="color: #9FA6B5;">
					<view class="flex">{{$t('zhuanyi.daozhangshuliang')}}<view class="iconfont icon-qiehuan" ></view></view>
					<view class="text-2xl font-bold">0.00</view>
					<view class="flex">{{$t('zhuanyi.shouxufei')}}：25 USDT</view>
					<view class="w-full py-2">
						<u-button :text="$t('zhuanyi.tixian')" color="#3f4651" style="color: #737475;width: 200rpx;margin: 0%;"></u-button>
					</view>
				</view>
			</view>
			
			<view style="line-height: 30px;color: #9FA6B5;" class="p-4">
				<view>{{$t('zhuanyi.qingzxjcbsr')}}</view>
				<view>{{$t('zhuanyi.fasbdyd')}}</view>
				<view>{{$t('zhuanyi.tbsxfjctb')}}</view>
			</view>
		</view>
		
		<lz-select-bi ref="lzselect"></lz-select-bi>
		
		<u-modal :show="modal.show" >
			<view class="flex flex-col justify-center items-center">
				<image src="/static/images/zichan/6.png" style="width: 60px;height: 60px;"></image>
				<view class="pt-4 text-center">
					{{$t('zhuanyi.qingrzhdndtbdz')}}
				</view>
			</view>
			<template #confirmButton>
				<u-button :text="$t('zhuanyi.queren')" color="#77abff" @click="modal.show=false"></u-button>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {},
		data() {
			return {
				search:{
					addr:'',
					select:'',
					range: [
						{ value: 0, text: 'ERC20' },
						{ value: 1, text: 'TRC20' }
					],
				},
				modal:{
					show:false
				}
			}
		},
		onLoad(op) {
			uni.clearStorageSync('tankuangzhuanyi')
		},
		onReady() {},
		methods: {
			// 切换选择
			changeselect(){
				
			},
			// 输入框改变
			changeInput(){
				let onoff = uni.getStorageSync('tankuangzhuanyi')
				if(!onoff){
					uni.setStorageSync('tankuangzhuanyi',true)
					this.modal.show=true
				}
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-steps-item__wrapper__circle{
		background-color: #fff!important;
		border-color:#3c9cff!important;
		width: 25px!important;
		height: 25px!important;
	}
	::v-deep .u-steps-item__wrapper__circle__text{
		color: #3c9cff!important;font-weight: bold;font-size: 14px;
	}
	::v-deep .u-steps-item__line--column{
		width: 2px!important;background-color: #3c9cff!important;
	}
	::v-deep .uni-select[data-v-6b64008e]{
		height: 42px!important;
	}
</style>